// ModelingPager.tsx
import { View, Text, Image, ScrollView } from "@tarojs/components"
import Taro from "@tarojs/taro"
import "./index.scss"
import React, { useEffect, useState } from "react";

interface ModelingItem {
  id: string | number;
  image: string;
  title: string;
  price: string
  [key: string]: any;
}

const mockData: ModelingItem[] = [
  {
    id: 1,
    image: `https://qcloud.dpfile.com/pc/RO1PPYWFnALhPVMeL2P9siIWxRozWWd0oFFi9jNgpo3b496vDQVmtOj-cPABMfP4.jpg`,
    title: "商务精英发型",
    price: "¥128",
    desc: "干练利落，适合职场男士",
    height: Math.floor(Math.random() * 50) + 180
  },
  {
    id: 2,
    image: `https://q8.itc.cn/images01/20240804/39c3817ba1994abd9aead996b0bf3b7c.jpeg`,
    title: "经典油头发型",
    price: "¥158",
    desc: "复古绅士，展现成熟魅力",
    height: Math.floor(Math.random() * 50) + 180
  },
  {
    id: 3,
    image: `https://qcloud.dpfile.com/pc/pgcO0xkly7CBv3ao29M-7V9IFgympCQbiW1EcHvmo9y3yWHxK51LrzCwqzz7tC7u.jpg`,
    title: "时尚Undercut",
    price: "¥168",
    desc: "两侧剃短，顶部留长，潮流之选",
    height: Math.floor(Math.random() * 50) + 180
  },
  {
    id: 4,
    image: `https://qcloud.dpfile.com/pc/inaWP2F0mY0Pc9FnQaogO_WJEZ421D1nVRgkFbk5JYY57EIn_lnJvPOWlS4lMt0N.jpg`,
    title: "韩式纹理烫",
    price: "¥198",
    desc: "自然蓬松，打造暖男形象",
    height: Math.floor(Math.random() * 50) + 180
  },
  {
    id: 5,
    image: `https://qcloud.dpfile.com/pc/AN_Ej1VCA8IKQ7cI4J3bXseQrOn4vevyUZhwxp7szq8opzl7UKxf251v2HlD_Lu0.jpg`,
    title: "美式板寸头",
    price: "¥88",
    desc: "简洁硬朗，阳刚之气十足",
    height: Math.floor(Math.random() * 50) + 180
  },
  {
    id: 6,
    image: `https://q2.itc.cn/images01/20240504/b348505d53b44e46bfd2f9881874f3eb.jpeg`,
    title: "日系微长发",
    price: "¥178",
    desc: "文艺慵懒，展现个性风格",
    height: Math.floor(Math.random() * 50) + 180
  },
  {
    id: 7,
    image: `https://qcloud.dpfile.com/pc/jicl6J5E_0Qv2t5f5q5q5w5w5w5w5w5.jpg`,
    title: "英伦侧分发型",
    price: "¥148",
    desc: "优雅绅士，彰显品味",
    height: Math.floor(Math.random() * 50) + 180,
    popular: true
  },
  {
    id: 8,
    image: `https://qcloud.dpfile.com/pc/kicl6J5E_0Qv2t5f5q5q5w5w5w5w5w5.jpg`,
    title: "法式慵懒卷",
    price: "¥218",
    desc: "浪漫随性，艺术气息",
    height: Math.floor(Math.random() * 50) + 180,
    tags: ["热门", "新款"]
  },
  {
    id: 9,
    image: `https://qcloud.dpfile.com/pc/licl6J5E_0Qv2t5f5q5q5w5w5w5w5w5.jpg`,
    title: "清爽短发造型",
    price: "¥98",
    desc: "简约时尚，易于打理",
    height: Math.floor(Math.random() * 50) + 180,
    discount: "¥128"
  },
  {
    id: 10,
    image: `https://qcloud.dpfile.com/pc/micl6J5E_0Qv2t5f5q5q5w5w5w5w5w5.jpg`,
    title: "创意雕刻发型",
    price: "¥258",
    desc: "个性独特，彰显自我",
    height: Math.floor(Math.random() * 50) + 180,
    duration: "60分钟"
  }
];

const ModelingPager: React.FC = () => {
  const [data, setData] = useState<ModelingItem[]>([]);

  // 模拟数据
  useEffect(() => {
    setData(mockData);
  }, []);

  return (
    <ScrollView
      className="waterfall-scrollview"
      scrollY
      enhanced
      showScrollbar={false}
    >
      <View className="waterfall-container">
        {data.map(item => (
          <View key={item.id} className="waterfall-item">
            <Image
              src={item.image}
              mode="aspectFill"
              className="waterfall-image"
              style={{ height: `${item.height}px` }}  // 只给图片设置高度
            />
            <View className="waterfall-content">
              <View className="waterfall-title">{item.title}</View>
              <View className="waterfall-desc">{item.desc}</View>
            </View>
          </View>
        ))}
      </View>
    </ScrollView>
  );
};

export default ModelingPager
